<script lang="ts" setup>
import { getPhotoGraph } from "../../api/";
interface IPhotoGraph {
  pid: number;
  url: string;
  width: number;
  height: number;
  deleted: number;
}
const tableData = ref<IPhotoGraph[]>([]);
onMounted(async () => {
  const info = await getPhotoGraph();
  console.log(info);
  tableData.value = info.data.map((i: IPhotoGraph) => {
    return {
      pid: i.pid,
      url: i.url,
      width: i.width,
      height: i.height,
      deleted: i.deleted,
    };
  });
});
const handleEdit = (index: number, row: any) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: any) => {
  console.log(index, row);
};
</script>
<template>
  <div>
    <div>
      <el-table :data="tableData" style="width: 100%" :height="500" lazy>
        <el-table-column fixed prop="pid" label="pid" width="150" />
        <el-table-column prop="url" label="图片" width="120" type="index">
          <template #default="scope">
            <el-image
              :src="tableData[scope.$index].url"
              :preview-src-list="[tableData[scope.$index].url]"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column prop="width" label="width" width="120" />
        <el-table-column prop="height" label="height" width="120" />
        <el-table-column prop="deleted" label="deleted" width="120" />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button
              type="success"
              @click="handleEdit(scope.$index, scope.row)"
            >
              Edit
            </el-button>
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
